<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        font-family: Arial, sans-serif;
        text-align: center;
      }

      h1 {
        font-size: 2em;
        color: #333;
        margin-bottom: 0.5em;
      }

      form {
        display: inline-block;
        text-align: left;
        padding: 1em;
        background-color: #f2f2f2;
        border-radius: 5px;
        box-shadow: 2px 2px 5px #999;
      }

      textarea {
        width: 80%;
        height: 100px;
        margin-bottom: 1em;
        padding: 0.5em;
        font-size: 1.2em;
        border-radius: 5px;
        border: 1px solid #ccc;
        box-shadow: 2px 2px 5px #999;
      }

      button {
        width: 100px;
        height: 40px;
        font-size: 1.2em;
        border-radius: 5px;
        border: none;
        background-color: #333;
        color: #fff;
        cursor: pointer;
      }

      button:hover {
        background-color: #000;
      }

      #output {
        margin-top: 1em;
        padding: 1em;
        background-color: #f2f2f2;
        border-radius: 5px;
        box-shadow: 2px 2px 5px #999;
        text-align: left;
        min-height: 100px;
      }
    </style>
  </head>
  <body>
    <h1>OpenAI ChatGPT</h1>
    <form>
      <textarea id="prompt"></textarea>
      <br />
      <button onclick="sendRequest()">Ask</button>
    </form>
    <div id="output"></div>
    <script>
      function sendRequest() {
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "https://api.openai.com/v1/engines/davinci/jobs");
        xhr.setRequestHeader("Content-Type", "application/json");
        xhr.setRequestHeader("Authorization", "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");
        xhr.onreadystatechange = function() {
          if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
            var response = JSON.parse(xhr.responseText);
            document.getElementById("output").innerHTML = response.choices[0].text;
          }
        };
        xhr.send(JSON.stringify({
          prompt: document.getElementById("prompt").value,
          max_tokens: 100,
          n: 1,
          stop: null,
          temperature: 0.5,
        }));
      }
    </script>
  </body>
</html>
